<template>
  <view class="">
    <view class="container_box">
      <view class="out_box" style="background-color: rgb(255, 255, 255)">
        <view class="noative">
          <u-notice-bar
            :text="text1"
            speed="80"
            bgColor="#bb443c"
            color="#ffffff"
          ></u-notice-bar>
        </view>

        <view class="box">
          <u-row
            customStyle="margin-bottom: 50px;margin-top: 10px;"
            justify="space-between"
          >
            <u-col span="4">
              <view class="col">
                <view class="fs30 head">本月业绩</view>
                <view class="fs34 target blue">{{
                  (wpsInfo.monthAmount / 100000).toFixed(1)
                }}</view>
                <view class="line"></view>
              </view>
            </u-col>
            <u-col span="4">
              <view class="col">
                <view class="fs30 head">距离目标</view>
                <view class="white fs34 target blue">{{ mubiao }}</view>
                <view class="line"></view>
              </view>
            </u-col>
            <u-col span="4">
              <view class="col">
                <view class="fs30 head">业绩排名</view>
                <view class="fs34 target red">{{
                  wpsInfo.rank ? wpsInfo.rank : "暂无"
                }}</view>
              </view>
            </u-col>
          </u-row>
          <u-row justify="space-between">
            <u-col span="4">
              <view class="col">
                <view class="fs30 head">本周5千链接</view>
                <view class="fs34 target origin">{{
                  wpsLinkInfo.weekFiveLinkCount
                }}</view>
                <view class="line"></view>
              </view>
            </u-col>
            <u-col span="4">
              <view class="col">
                <view class="fs30 head">本月5千链接</view>
                <view class="fs34 target origin">{{
                  wpsLinkInfo.monthFiveLinkCount
                }}</view>
                <view class="line"></view>
              </view>
            </u-col>
            <u-col span="4">
              <view class="col">
                <view class="fs30 head">链接排名</view>
                <view class="fs34 target origin">{{
                  wpsLinkInfo.rank ? wpsLinkInfo.rank : "暂无"
                }}</view>
              </view>
            </u-col>
          </u-row>
        </view>
      </view>
    </view>
  </view>
</template>
  
  <script>
import {
  wpsSignerTableStatistics,
  wpsLinkTableStatistics,
} from "@/api/index/index";
export default {
  components: {},
  data() {
    return {
      wpsInfo: {
        weekAmount: 0, //本周签单金额
        monthAmount: 0, //本月签单金额
        rank: 0, //排行榜
      },
      wpsLinkInfo: {
        weekFiveLinkCount: 0, //本周 5000 链接数量
        monthFiveLinkCount: 0, //本月 5000 链接数量
        rank: 0, //排行
      },
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
    topNavStyle() {
      return {
        style: `padding-top:${this.statusBarHeight}px;height:${this.menuButtonHeight}px;`,
      };
    },
    firstCome() {
      return this.$store.state.firstCome;
    },
    text1() {
      return `亲爱的隐耀家人，每人每周需完成一笔五千链接,您本月已完成${this.wpsLinkInfo.monthFiveLinkCount}条`;
    },
    mubiao() {
      let mubiao = (8 - this.wpsInfo.monthAmount / 100000).toFixed(1);
      console.log(mubiao);
      if (mubiao > 0) {
        return mubiao;
      } else {
        return 0;
      }
    },
  },
  mounted() {
    this.getWPSdata();
    this.getWPSLinkdata();
  },
  methods: {
    /**
     * 获取剩余天数
     */
    getRemainingDays() {
      const today = new Date();
      // 创建本月最后一天的日期对象（下个月的第0天）
      const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
      // 计算剩余天数
      return lastDay.getDate() - today.getDate();
    },
    /**
     * 获取已过周数
     */
    getPassedWeeks() {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth();

      // 获取本月第一天
      const firstDay = new Date(year, month, 1);

      // 找到本月第一个周一
      let firstMonday = new Date(firstDay);
      while (firstMonday.getDay() !== 1) {
        firstMonday.setDate(firstMonday.getDate() + 1);
      }

      // 如果第一个周一超过3号，则视为跨月周（归到上月）
      if (firstMonday.getDate() > 3) {
        firstMonday.setDate(1); // 从本月1号开始计算
        while (firstMonday.getDay() !== 1) {
          firstMonday.setDate(firstMonday.getDate() + 1);
        }
      }

      // 计算当前日期与第一个周一的差值
      const timeDiff = today.getTime() - firstMonday.getTime();
      const dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));

      // 计算已过去周数（向上取整）
      return dayDiff > 0 ? Math.ceil(dayDiff / 7) : 0;
    },
    /**
     * 点击时间
     */
    clickTime(val) {
      console.log(val);
      this.activityTime = val.value;
    },
    /**
     * 点击tab
     */
    clickTab(val) {
      console.log(val);
      if (val.index == 1) {
        this.getWPSdata();
        this.getWPSLinkdata();
      }
      this.selectTab = val.index;
    },
    /**
     * 获取业绩数据
     */
    getWPSdata() {
      wpsSignerTableStatistics().then((res) => {
        console.log(res, "getWPSdata");
        this.wpsInfo = res.data;
      });
    },
    /**
     * 获取业绩数据
     */
    getWPSLinkdata() {
      wpsLinkTableStatistics().then((res) => {
        console.log(res, "getWPSLinkdata");
        this.wpsLinkInfo = res.data;
      });
    },
  },
  onShow() {},
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
};
</script>
  
  <style lang="scss" scoped>
.pageLayout {
  padding: 24rpx 40rpx;
}

.container_box {
  .box {
    .col {
      //   border-right: 1rpx solid rgba(28, 27, 38, 0.178);
      position: relative;
      text-align: center;
      .line{
        position: absolute;
        width: 1rpx;
        height: 55rpx;
        background-color: rgba(28, 27, 38, 0.185);
        right: 10rpx;
        top: 20rpx;
      }
    }
  }

  .out_box {
    // width: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 20rpx;

    .title {
      display: flex;
      align-items: center;
      border-bottom: 8rpx solid #333333;
      //   width: 100%;
      padding-bottom: 30rpx;

      .text {
        font-size: 36rpx;
        color: #ffffff;
        margin-left: 30rpx;
      }
    }

    .desc {
      margin-top: 30rpx;
      width: 80%;
      text-align: center;
      font-size: 28rpx;
      background-color: #ffffff;
      padding: 10rpx 20rpx;
      border-radius: 30rpx;
    }

    .top_box {
      height: 300rpx;
      box-sizing: border-box;
      //   padding: 30rpx;
      background-color: #a16354;
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .bot_box {
      height: 300rpx;
      box-sizing: border-box;
      //   padding: 30rpx;
      background-color: #caa588;
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}
.white {
  color: #fff;
}
.fs30 {
  font-size: 30rpx;
}
.fs34 {
  font-size: 34rpx;
}
.red {
  color: #cb0d23;
}
.origin {
  color: #f98152;
}
.blue {
  color: #3f9bfd;
}
.noative {
  //   width: 95%;
  margin: 0 auto;
  text-align: center;
  border-radius: 30rpx;
  overflow: hidden;
}
.target {
  margin-top: 10rpx;
}
</style>